<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>添加订单</title>
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css"
    />
    <style>
      /* 页面容器 */
      .page-container {
        padding: 0;
        height: 100vh;
        box-sizing: border-box;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
      }

      /* 头部标题样式 */
      .header {
        padding: 12px 16px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        position: relative;
      }

      .header-title {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        text-align: center;
      }

      /* 标签页样式 */
      .tabs-container {
        background-color: #fff;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
      }

      .tabs-wrapper {
        display: flex;
        overflow-x: auto;
        padding: 0 8px;
        position: absolute;
        top: 0;
        left: 0;
      }

      .tab-item {
        padding: 12px 16px;
        white-space: nowrap;
        font-size: 14px;
        color: #666;
        border-bottom: 2px solid transparent;
      }

      .tab-item.active {
        color: #1989fa;
        border-bottom-color: #1989fa;
      }

      .tab-item.more {
        display: flex;
        align-items: center;
      }

      /* 订单列表样式 */
      .order-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 10px;
        height: 100vh;
      }

      /* 订单项样式 */
      .order-item {
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        overflow: hidden;
      }

      .order-header {
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .order-id {
        font-size: 15px;
        font-weight: 500;
        color: #333;
      }

      .order-status {
        font-size: 13px;
        padding: 2px 8px;
        border-radius: 12px;
      }

      /* 订单详情样式 - 重点修改：改为双列布局 */
      .order-detail {
        padding-top: 3px;
        font-size: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* gap: 8px; */
      }

      .detail-row {
        display: flex;
        line-height: 1.2em;
      }

      .detail-label {
        color: #999;
        font-size: 12px;
        margin-bottom: 2px;
      }

      .detail-value {
        color: #333;
        font-size: 12px;
        word-break: break-all;
      }

      /* 订单操作样式 */
      .order-actions {
        border-top: 1px solid #f0f0f0;
        display: flex;
        justify-content: flex-end;
      }

      .czbutton {
        font-size: 13px;
        border-radius: 4px;
        padding: 0 3px;
        margin: 0 3px;
        height: 2em;
      }
      .bordbtn {
        border: 1px solid #848485;
      }

      /* 底部按钮样式 */
      .bottom-button {
        padding: 16px;
      }

      .add-order-button {
        width: 100%;
        background-color: #1989fa;
        color: #fff;
        border: none;
        border-radius: 24px;
        padding: 12px;
        font-size: 16px;
      }

      .van-cell {
        padding: 8px 6px;
      }

      .status-ywc {
        background-color: #f0f9ff;
        color: #409eff;
      }

      .status-ydd {
        background-color: #f6ffed;
        color: #67c23a;
      }

      .status-ddd {
        background-color: #f5f7fa;
        color: #909399;
      }

      .status-defule {
        background-color: #fff0f6;
        color: #f56c6c;
      }

      /* 全局样式 */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
      }

      #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
      .van-cell--clickable {
        text-align: right;
        color: #666;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <van-popup v-model="showPicker.zhdPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="zhdPickerOptions"
          @confirm="onConfirm_zhd"
          @cancel="showPicker.zhdPicker = false"
        />
      </van-popup>

      <div class="page-container">
        <div style="position: relative">
          <van-collapse v-model="activeNames">
            <van-collapse-item title="更多" name="1">
              <div style="display: flex">
                <van-cell-group>
                  <van-field v-model="fromate.ddh" placeholder="订单号" />
                </van-cell-group>
                <van-cell-group>
                  <van-field v-model="fromate.ydh" placeholder="运单号" />
                </van-cell-group>
              </div>
              <div style="display: flex">
                <van-cell-group>
                  <van-field
                    readonly
                    clickable
                    name="picker"
                    :value="fromate.zhd"
                    placeholder="状态"
                    @click="showPicker.zhdPicker = true"
                  />
                </van-cell-group>
              </div>

              <div style="text-align: right">
                <van-button type="warning" size="small" @click="resetquery"
                  >重置</van-button
                >
                <van-button type="info" size="small" @click="searchTable"
                  >查询</van-button
                >
              </div>
            </van-collapse-item>
          </van-collapse>
          <!-- 标签页 - 动态绑定active类 -->
          <div class="tabs-container">
            <div class="tabs-wrapper">
              <div class="tab-item">销售订单</div>
            </div>
          </div>
        </div>
        <!-- 订单列表 -->
        <div class="order-list">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="order in orderList"
              :key="order.SDLNID"
              class="order-item"
            >
              <div class="order-header">
                <div
                  class="order-id"
                  style="color: rgb(106 66 66); display: flex"
                >
                  &nbsp;&nbsp;订单号:<span>{{order.SDLNID}}</span>
                </div>
                <div :class="['order-status', conffeijgg(order.SDNXTR)]">
                  {{DDZText[order.SDNXTR]}}
                </div>
              </div>
              <div class="order-detail">
                <div class="detail-row">
                  <div class="detail-label">客户简称:</div>
                  <div class="detail-value">{{order.SDAN8T}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">业务类型:</div>
                  <div class="detail-value">{{order.SDLITM}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">客户订单号:</div>
                  <div class="detail-value">{{order.SDCUSDOC}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">订单日期:</div>
                  <div class="detail-value">{{order.SDDRQJ}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">产品:</div>
                  <div class="detail-value">{{order.SDLITM}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">订单数量:</div>
                  <div class="detail-value">{{order.SDUORG}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">装货地点:</div>
                  <div class="detail-value">{{order.SouAddName}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">要求装货时间:</div>
                  <div class="detail-value">{{order.SouRDT}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">卸货地点:</div>
                  <div class="detail-value">{{order.SDPA8T}}</div>
                </div>
                <div class="detail-row">
                  <div class="detail-label">要求卸货时间:</div>
                  <div class="detail-value">{{order.UnloadDT}}</div>
                </div>
              </div>
              <div class="order-actions">
                <van-button
                  class="czbutton bordbtn"
                  icon="delete-o"
                  size="small"
                  plain
                  >删除</van-button
                >
                <van-button
                  class="czbutton bordbtn"
                  plain
                  size="small"
                  icon="orders-o"
                  >复制</van-button
                >
                <van-button
                  class="czbutton"
                  type="info"
                  plain
                  size="small"
                  icon="edit"
                  @click="addOrder('edit')"
                  >编辑</van-button
                >
              </div>
            </van-cell>
          </van-list>
          <!-- 无数据时显示 -->
          <!-- <div
            v-if="filteredOrders.length === 0"
            style="text-align: center; padding: 40px 0; color: #999"
          >
            暂无订单数据
          </div> -->
        </div>

        <!-- 底部按钮 -->
        <div class="bottom-button">
          <van-button
            class="add-order-button"
            icon="plus"
            @click="addOrder('add')"
          >
            新增销售订单
          </van-button>
        </div>
      </div>
    </div>
    <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
    <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant.2.15.54.min.js"></script>
    <script>
      Vue.use(vant.Icon);
      Vue.use(vant.Toast);
      new Vue({
        el: "#app",
        data() {
          return {
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            activeTab: "全部",
            activeNames: [],
            filteredOrders: [],
            loading: false,
            finished: false,
            fromate: {
              ddh: undefined,
            },
            showPicker: {
              zhdPicker: false,
            },
            zhdPickerOptions: ["全部", "待调度", "已调度", "已完成"],
            Option_All: {},
            orderList: [
              {
                SDLNID: "123456",
                SDNXTR: 1,
                SDAN8T: "客户A",
                checked: false,
                SDDCTO: "业务类型1",
                SDCUSDOC: "客户订单号1",
                SDLITM: "产品1",
                SDUORG: "100",
                SouAddName: "装货地点1",
                SouRDT: "2023-08-01 10:00",
                SDPA8T: "卸货地点1",
                UnloadDT: "2023-08-01 15:00",
                SDDRQJ: "2023-08-01",
              },
              {
                SDLNID: "123457",
                SDNXTR: 2,
                SDAN8T: "客户B",
                checked: false,
                SDDCTO: "业务类型2",
                SDCUSDOC: "客户订单号2",
                SDLITM: "产品2",
                SDUORG: "200",
                SouAddName: "装货地点2",
                SouRDT: "2023-08-02 10:00",
                SDPA8T: "卸货地点2",
                UnloadDT: "2023-08-02 15:00",
                SDDRQJ: "2023-08-02",
              },
              {
                SDLNID: "123458",
                SDNXTR: 3,
                SDAN8T: "客户C",

                checked: false,
                SDDCTO: "业务类型3",
                SDCUSDOC: "客户订单号3",
                SDLITM: "产品3",
                SDUORG: "300",
                SouAddName: "装货地点3",
                SouRDT: "2023-08-03 10:00",
                SDPA8T: "卸货地点3",
                UnloadDT: "2023-08-03 15:00",
                SDDRQJ: "2023-08-03",
              },
              {
                SDLNID: "123459",
                SDNXTR: 1,
                SDAN8T: "客户D",
                checked: false,
                SDDCTO: "业务类型4",
                SDCUSDOC: "客户订单号4",
                SDLITM: "产品4",
                SDUORG: "400",
                SouAddName: "装货地点4",
                SouRDT: "2023-08-04 10:00",
                SDPA8T: "卸货地点4",
                UnloadDT: "2023-08-04 15:00",
                SDDRQJ: "2023-08-04",
              },
              {
                SDLNID: "123460",
                SDNXTR: 2,
                SDAN8T: "客户E",

                checked: false,
                SDDCTO: "业务类型5",
                SDCUSDOC: "客户订单号5",
                SDLITM: "产品5",
                SDUORG: "500",
                SouAddName: "装货地点5",
                SouRDT: "2023-08-05 10:00",
                SDPA8T: "卸货地点5",
                UnloadDT: "2023-08-05 15:00",
                SDDRQJ: "2023-08-05",
              },
            ],
            DDZText: {
              1: "待调度",
              2: "已调度",
              3: "已完成",
            },
            pagination: {
              page: 1,
              rows: 10,
            },
          };
        },
        computed: {
          isdevUrl() {
            let url = location.href;
            return url.indexOf("http://127.0.0.1:5500") !== -1;
          },
        },
        created() {
          this.getCustomerC(); //获取下拉
        },
        methods: {
          conffeijgg(status) {
            if (status == 1) {
              return "status-ddd";
            } else if (status == 2) {
              return "status-ydd";
            } else if (status == 3) {
              return "status-ywc";
            } else {
              return "status-defule";
            }
          },
          onLoad() {
            console.log("触底");
            this.loadOrderData();
            this.pagination.rows += 10;
          },
          onConfirm_zhd(value) {
            this.fromate.zhd = value;
            this.showPicker.zhdPicker = false;
          },
          //查询
          searchTable() {
            this.pagination.rows = 10;
            this.finished = false;
            this.loadOrderData();
          },
          //重置查询
          resetquery() {
            this.fromate = {
              zhd: undefined,
            };
            this.loadOrderData();
          },

          addOrder(type) {
            if (this.isdevUrl) {
              location.href = `http://127.0.0.1:5500/xiaoshoudingdan/xiaoshoudingdanAdd.html?mode=${type}`;
            } else {
              // 处理其他环境或默认行为
            }
          },
          //请求下拉
          async getCustomerC() {},

          // 请求列表123
          loadOrderData() {
            // 这里可以添加从服务器获取订单数据的逻辑
          },
        },
      });
    </script>
  </body>
</html>
